<template>
  <el-dialog
      v-model="isDialogAddVisible"
      title="流程部署"
      width="30%"
      :before-close="handleClose"
  >
   <div>
     <el-form :model="form" label-width="120px">
       <el-form-item label="流程名称">
         <el-input v-model="form.name" />
       </el-form-item>
       <el-form-item label="流程类别">
         <el-input v-model="form.type" />
       </el-form-item>
      <el-form-item label="上传部署文件">
        <el-upload
            class="upload-demo"
            action="none"
            multiple
            accept=".xml"
            :on-success="handleAvatarSuccess"
            :auto-upload="false"
            :on-change="handlePreview"
        >
          <template #trigger>
            <el-button type="primary" size="small">文件</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip">
            </div>
          </template>
        </el-upload>

      </el-form-item>
     </el-form>
   </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isDialogAddVisible = false">取消</el-button>
        <el-button type="primary" @click="deploySave">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref, toRefs, watch} from 'vue'
import {ElMessageBox, UploadProps} from 'element-plus'
import axios from "axios";
import { useRouter } from "vue-router";
import {log} from "util";
const router = useRouter();
//通过父组件控制子组件的值

const props =defineProps({
  dialogVisible: {
  type: Boolean,
  default: "",
},
});
//流程部署的表单
const form = reactive({
  name: '',
  type: '',
  flie: '',

})
const propsData = toRefs(props)

const emits = defineEmits(['update:dialogVisible']) // 此处需写'update'
const isDialogAddVisible = ref(false)
//把监听父组件的值赋值给子组件的新值
watch(propsData.dialogVisible, (val, old) => {
  isDialogAddVisible.value = val
})
//然后在监听子组件的新值
watch(isDialogAddVisible, (val, old) => {
  emits('update:dialogVisible', val) // 此处的update亦要写
})
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
//提交事件
const deploySave = ()=>{
  console.log(form)

  isDialogAddVisible.value = false ;
  const url = "http://localhost:1688/deploy/inioDeploy"
  const formData = new FormData();
  formData.append("name",form.name);
  formData.append("type",form.type);
  formData.append("file",form.flie);

  axios.post(url,formData).then((ref)=>{

    // router.go(0)
  })
}
const handleAvatarSuccess = (res, file, fileList) =>{
  alert(1)
  console.log("上传成功的钩子", file, fileList);
  file.name="parser.file.name20210624094432988.apk";

}
//当我点击更换文件时触发
const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
 form.flie = uploadFile.raw
}
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
